<script setup>
import dayjs from "dayjs";
import { ref } from "vue";

const detailInfo = ref(null)
const drawer = ref(false);
const openDrawer = (row) => {
  detailInfo.value = row
  drawer.value = true
}

defineExpose({ openDrawer });
</script>

<template>
  <div>
    <el-drawer v-model="drawer" title="" size='580px' direction="ltr">
      <div class="title">{{detailInfo.title}}</div>
      <div class="time">
        <div class="ic">
          <el-tag type="primary"># {{ detailInfo.type }}</el-tag>
        </div>
        <p v-if="detailInfo.updated_at">更新时间：{{ dayjs.unix(detailInfo.updated_at).format("YYYY-MM-DD HH:mm:ss") }}</p>
        <p v-else>创建时间：{{ dayjs.unix(detailInfo.created_at).format("YYYY-MM-DD HH:mm:ss") }}</p>
      </div>
      <div class="text" v-html="detailInfo.content"></div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-drawer__title){
  font-weight: bold;
  color: #000;
  font-size: 17px;
}
:deep(.el-drawer__header){
  margin-bottom: 0;
}

.title{
  font-size: 17px;
  color: #000;
  font-weight: bold;
  text-align: center;
}
.time{
  width: 100%;
  height: 35px;
  background-color: #f3f6f9;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  p{
    font-size: 14px;
    color: #666;
  }
}
.text{
  margin-top: 20px;
  font-size: 14px;
  color: #000;
  :deep(p) {
    margin: 1em 0;
  }
}
</style>
